<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人主页 | 张小明的个人网站</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome 图标 -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- 配置 Tailwind -->
    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              primary: "#3B82F6",
              secondary: "#10B981",
              accent: "#8B5CF6",
              dark: {
                100: "#374151",
                200: "#1F2937",
                300: "#111827",
              },
              light: {
                100: "#F9FAFB",
                200: "#F3F4F6",
                300: "#E5E7EB",
              },
            },
            fontFamily: {
              sans: ["Inter", "system-ui", "sans-serif"],
              mono: ["Fira Code", "monospace"],
            },
          },
        },
      };
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .text-gradient {
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .transition-custom {
          transition: all 0.3s ease;
        }
        .hover-lift {
          @apply hover:-translate-y-1 transition-all duration-300;
        }
      }
    </style>
  </head>

  <body
    class="bg-light-100 dark:bg-dark-300 text-gray-800 dark:text-gray-200 font-sans transition-colors duration-300"
  >
    <!-- 顶部导航栏 -->
    <header
      class="fixed w-full bg-light-100/80 dark:bg-dark-300/80 backdrop-blur-md z-50 transition-all duration-300 shadow-sm"
    >
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center py-4">
          <!-- 网站标志 -->
          <a href="#" class="flex items-center space-x-2">
            <div
              class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center"
            >
              <span class="text-white font-bold">ZM</span>
            </div>
            <span class="text-xl font-bold hidden sm:inline-block">张小明</span>
          </a>

          <!-- 桌面端导航链接 -->
          <nav class="hidden md:flex items-center space-x-8">
            <a
              href="#about"
              class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
              >关于我</a
            >
            <a
              href="#skills"
              class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
              >技能</a
            >
            <a
              href="#projects"
              class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
              >项目</a
            >
            <a
              href="#contact"
              class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
              >联系我</a
            >
          </nav>

          <!-- 主题切换按钮 - 修复图标显示问题 -->
          <button
            id="theme-toggle"
            class="p-2 rounded-full hover:bg-light-200 dark:hover:bg-dark-100 transition-colors"
          >
            <i class="fa fa-sun-o text-yellow-500 block dark:hidden"></i>
            <i class="fa fa-moon-o text-blue-300 hidden dark:inline-block"></i>
          </button>

          <!-- 移动端菜单按钮 -->
          <button
            id="mobile-menu-button"
            class="md:hidden p-2 rounded-lg hover:bg-light-200 dark:hover:bg-dark-100 transition-colors"
          >
            <i class="fa fa-bars"></i>
          </button>
        </div>
      </div>

      <!-- 移动端导航菜单 -->
      <div
        id="mobile-menu"
        class="md:hidden hidden bg-white dark:bg-dark-200 shadow-lg absolute w-full"
      >
        <div class="container mx-auto px-4 py-3 space-y-3">
          <a
            href="#about"
            class="block py-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
            >关于我</a
          >
          <a
            href="#skills"
            class="block py-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
            >技能</a
          >
          <a
            href="#projects"
            class="block py-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
            >项目</a
          >
          <a
            href="#contact"
            class="block py-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
            >联系我</a
          >
        </div>
      </div>
    </header>

    <main>
      <!-- 英雄区域 -->
      <section class="pt-32 pb-20 md:pt-40 md:pb-32">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="max-w-4xl mx-auto text-center">
            <div
              class="inline-block mb-4 px-3 py-1 bg-primary/10 dark:bg-primary/20 text-primary rounded-full text-sm font-medium"
            >
              前端开发者 & 设计师
            </div>
            <h1
              class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight"
            >
              你好，我是
              <span
                class="bg-gradient-to-r from-primary to-accent text-gradient"
                >张小明</span
              >
            </h1>
            <p
              class="text-lg md:text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto"
            >
              专注于创建美观、易用且功能强大的Web体验，热衷于前端技术和用户界面设计。
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
              <a
                href="#contact"
                class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-all shadow-lg shadow-primary/20 hover:shadow-primary/30 hover:-translate-y-1"
              >
                联系我
              </a>
              <a
                href="#projects"
                class="px-6 py-3 bg-white dark:bg-dark-200 border border-gray-300 dark:border-gray-700 hover:bg-light-200 dark:hover:bg-dark-100 font-medium rounded-lg transition-all hover:-translate-y-1"
              >
                查看我的项目
              </a>
            </div>
          </div>
        </div>
      </section>

      <!-- 关于我 -->
      <section
        id="about"
        class="py-20 bg-white dark:bg-dark-200 transition-colors duration-300"
      >
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
              <h2 class="text-3xl md:text-4xl font-bold mb-4">关于我</h2>
              <div
                class="w-20 h-1 bg-gradient-to-r from-primary to-accent mx-auto rounded-full"
              ></div>
            </div>

            <div class="grid md:grid-cols-2 gap-12 items-center">
              <div class="relative">
                <div
                  class="absolute -top-4 -left-4 w-64 h-64 bg-primary/10 dark:bg-primary/20 rounded-full -z-10"
                ></div>
                <div
                  class="absolute -bottom-4 -right-4 w-64 h-64 bg-accent/10 dark:bg-accent/20 rounded-full -z-10"
                ></div>
                <img
                  src="https://picsum.photos/id/1012/600/600"
                  alt="张小明的照片"
                  class="w-full max-w-md mx-auto rounded-xl shadow-xl object-cover h-[400px]"
                />
              </div>

              <div class="space-y-6">
                <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
                  我是一名拥有5年前端开发经验的开发者，热衷于创建优秀的用户体验和界面设计。我毕业于计算机科学专业，对Web技术充满热情。
                </p>
                <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
                  我的开发理念是"用户至上"，始终将用户体验放在首位。我擅长将复杂的问题转化为简洁、直观的解决方案，并不断学习新技术来提升自己的技能。
                </p>

                <div class="grid grid-cols-2 gap-4 pt-4">
                  <div class="flex items-center space-x-3">
                    <div
                      class="w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center"
                    >
                      <i class="fa fa-graduation-cap text-primary"></i>
                    </div>
                    <div>
                      <h3 class="font-medium">计算机科学</h3>
                      <p class="text-sm text-gray-500 dark:text-gray-500">
                        学士学位
                      </p>
                    </div>
                  </div>

                  <div class="flex items-center space-x-3">
                    <div
                      class="w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center"
                    >
                      <i class="fa fa-briefcase text-primary"></i>
                    </div>
                    <div>
                      <h3 class="font-medium">5年经验</h3>
                      <p class="text-sm text-gray-500 dark:text-gray-500">
                        前端开发
                      </p>
                    </div>
                  </div>
                </div>

                <a
                  href="#"
                  class="inline-flex items-center space-x-2 text-primary font-medium hover:underline"
                >
                  <span>下载我的简历</span>
                  <i class="fa fa-download"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 技能 -->
      <section id="skills" class="py-20 transition-colors duration-300">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
              <h2 class="text-3xl md:text-4xl font-bold mb-4">我的技能</h2>
              <div
                class="w-20 h-1 bg-gradient-to-r from-primary to-accent mx-auto rounded-full"
              ></div>
              <p
                class="mt-4 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto"
              >
                我精通多种前端技术和工具，能够独立完成从设计到开发的全流程工作
              </p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              <!-- 技能卡片 1 -->
              <div
                class="bg-white dark:bg-dark-200 p-6 rounded-xl shadow-sm hover:shadow-md transition-all hover-lift"
              >
                <div
                  class="w-12 h-12 rounded-lg bg-primary/10 dark:bg-primary/20 flex items-center justify-center mb-4"
                >
                  <i class="fa fa-html5 text-2xl text-orange-500"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">HTML & CSS</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
                  精通HTML5语义化标签和CSS3特性，包括Flexbox、Grid和动画效果。
                </p>
                <div class="flex flex-wrap gap-2">
                  <span
                    class="px-2 py-1 bg-light-200 dark:bg-dark-100 rounded-full text-xs"
                    >HTML5</span
                  >
                  <span
                    class="px-2 py-1 bg-light-200 dark:bg-dark-100 rounded-full text-xs"
                    >CSS3</span
                  >
                  <span
                    class="px-2 py-1 bg-light-200 dark:bg-dark-100 rounded-full text-xs"
                    >Tailwind</span
                  >
                  <span
                    class="px-2 py-1 bg-light-200 dark:bg-dark-100 rounded-full text-xs"
                    >Sass</span
                  >
                </div>
              </div>

              <!-- 技能卡片 2 -->
              <div
                class="bg-white dark:bg-dark-200 p-6 rounded-xl shadow-sm hover:shadow-md transition-all hover-lift"
              >
                <div
                  class="w-12 h-12 rounded-lg bg-primary/10 dark:bg-primary/20 flex items-center justify-center mb-4"
                >
                  <i class="fa fa-code text-2xl text-yellow-500"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">JavaScript</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
                  熟练掌握JavaScript ES6+特性，能够构建交互性强的Web应用。
                </p>
                <div class="flex flex-wrap gap-2">
                  <span
                    class="px-2 py-1 bg-light-200 dark:bg-dark-100 rounded-full text-xs"
                    >ES6+</span
                  >
                  <span
                    class="px-2 py-1 bg-light-200 dark:bg-dark-100 rounded-full text-xs"
                    >React</span
                  >
                  <span
                    class="px-2 py-1 bg-light-200 dark:bg-dark-100 rounded-full text-xs"
                    >Vue</span
                  >
                  <span
                    class="px-2 py-1 bg-light-200 dark:bg-dark-100 rounded-full text-xs"
                    >TypeScript</span
                  >
                </div>
              </div>

              <!-- 技能卡片 3 -->
              <div
                class="bg-white dark:bg-dark-200 p-6 rounded-xl shadow-sm hover:shadow-md transition-all hover-lift"
              >
                <div
                  class="w-12 h-12 rounded-lg bg-primary/10 dark:bg-primary/20 flex items-center justify-center mb-4"
                >
                  <i class="fa fa-paint-brush text-2xl text-pink-500"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">UI/UX 设计</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
                  具备良好的设计感，能够创建美观且用户友好的界面设计。
                </p>
                <div class="flex flex-wrap gap-2">
                  <span
                    class="px-2 py-1 bg-light-200 dark:bg-dark-100 rounded-full text-xs"
                    >Figma</span
                  >
                  <span
                    class="px-2 py-1 bg-light-200 dark:bg-dark-100 rounded-full text-xs"
                    >原型设计</span
                  >
                  <span
                    class="px-2 py-1 bg-light-200 dark:bg-dark-100 rounded-full text-xs"
                    >响应式设计</span
                  >
                  <span
                    class="px-2 py-1 bg-light-200 dark:bg-dark-100 rounded-full text-xs"
                    >用户研究</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 项目 -->
      <section
        id="projects"
        class="py-20 bg-white dark:bg-dark-200 transition-colors duration-300"
      >
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
              <h2 class="text-3xl md:text-4xl font-bold mb-4">我的项目</h2>
              <div
                class="w-20 h-1 bg-gradient-to-r from-primary to-accent mx-auto rounded-full"
              ></div>
              <p
                class="mt-4 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto"
              >
                以下是我参与开发的一些项目，展示了我的技术能力和解决问题的思路
              </p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              <!-- 项目卡片 1 -->
              <div
                class="bg-light-100 dark:bg-dark-300 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all group hover-lift"
              >
                <div class="relative overflow-hidden">
                  <img
                    src="https://picsum.photos/id/3/600/400"
                    alt="电商网站项目"
                    class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110"
                  />
                  <div
                    class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end"
                  >
                    <div class="p-4 w-full">
                      <div class="flex justify-between">
                        <a
                          href="#"
                          class="text-white text-sm font-medium hover:underline"
                          >查看项目</a
                        >
                        <a
                          href="#"
                          class="text-white text-sm font-medium hover:underline"
                          >GitHub</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <div class="p-5">
                  <h3 class="text-xl font-semibold mb-2">电商网站重构</h3>
                  <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
                    使用React和Tailwind重构的电商平台，提升了页面加载速度和用户体验。
                  </p>
                  <div class="flex flex-wrap gap-2">
                    <span
                      class="px-2 py-1 bg-white dark:bg-dark-200 rounded-full text-xs"
                      >React</span
                    >
                    <span
                      class="px-2 py-1 bg-white dark:bg-dark-200 rounded-full text-xs"
                      >Tailwind</span
                    >
                    <span
                      class="px-2 py-1 bg-white dark:bg-dark-200 rounded-full text-xs"
                      >Redux</span
                    >
                  </div>
                </div>
              </div>

              <!-- 项目卡片 2 -->
              <div
                class="bg-light-100 dark:bg-dark-300 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all group hover-lift"
              >
                <div class="relative overflow-hidden">
                  <img
                    src="https://picsum.photos/id/180/600/400"
                    alt="管理后台项目"
                    class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110"
                  />
                  <div
                    class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end"
                  >
                    <div class="p-4 w-full">
                      <div class="flex justify-between">
                        <a
                          href="#"
                          class="text-white text-sm font-medium hover:underline"
                          >查看项目</a
                        >
                        <a
                          href="#"
                          class="text-white text-sm font-medium hover:underline"
                          >GitHub</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <div class="p-5">
                  <h3 class="text-xl font-semibold mb-2">数据管理后台</h3>
                  <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
                    为企业客户开发的数据分析管理后台，支持数据可视化和报表导出。
                  </p>
                  <div class="flex flex-wrap gap-2">
                    <span
                      class="px-2 py-1 bg-white dark:bg-dark-200 rounded-full text-xs"
                      >Vue</span
                    >
                    <span
                      class="px-2 py-1 bg-white dark:bg-dark-200 rounded-full text-xs"
                      >TypeScript</span
                    >
                    <span
                      class="px-2 py-1 bg-white dark:bg-dark-200 rounded-full text-xs"
                      >ECharts</span
                    >
                  </div>
                </div>
              </div>
            </div>

            <div class="text-center mt-12">
              <a
                href="#"
                class="inline-flex items-center space-x-2 px-6 py-3 bg-light-200 dark:bg-dark-100 hover:bg-light-300 dark:hover:bg-dark-100/80 font-medium rounded-lg transition-all"
              >
                <span>查看更多项目</span>
                <i class="fa fa-arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
      </section>

      <!-- 联系我 -->
      <section id="contact" class="py-20 transition-colors duration-300">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
              <h2 class="text-3xl md:text-4xl font-bold mb-4">联系我</h2>
              <div
                class="w-20 h-1 bg-gradient-to-r from-primary to-accent mx-auto rounded-full"
              ></div>
              <p
                class="mt-4 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto"
              >
                有任何问题或合作意向？请随时联系我，我会尽快回复您
              </p>
            </div>

            <div class="grid md:grid-cols-2 gap-12 items-center">
              <div>
                <div class="bg-white dark:bg-dark-200 p-8 rounded-xl shadow-sm">
                  <h3 class="text-2xl font-semibold mb-6">发送消息</h3>

                  <form class="space-y-5">
                    <div>
                      <label
                        for="name"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
                        >您的姓名</label
                      >
                      <input
                        type="text"
                        id="name"
                        class="w-full px-4 py-3 bg-light-100 dark:bg-dark-300 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all"
                        placeholder="请输入您的姓名"
                      />
                    </div>

                    <div>
                      <label
                        for="contact-email"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
                        >电子邮箱</label
                      >
                      <input
                        type="email"
                        id="contact-email"
                        class="w-full px-4 py-3 bg-light-100 dark:bg-dark-300 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all"
                        placeholder="请输入您的电子邮箱"
                      />
                    </div>

                    <div>
                      <label
                        for="message"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
                        >您的消息</label
                      >
                      <textarea
                        id="message"
                        rows="4"
                        class="w-full px-4 py-3 bg-light-100 dark:bg-dark-300 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all resize-none"
                        placeholder="请输入您的消息内容"
                      ></textarea>
                    </div>

                    <button
                      type="submit"
                      class="w-full px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-all shadow-lg shadow-primary/20 hover:shadow-primary/30"
                    >
                      发送消息
                    </button>
                  </form>
                </div>
              </div>

              <div class="space-y-8">
                <div>
                  <h3 class="text-2xl font-semibold mb-4">联系方式</h3>
                  <p class="text-gray-600 dark:text-gray-400">
                    您可以通过以下方式联系到我，我会尽快回复您的咨询
                  </p>
                </div>

                <div class="space-y-5">
                  <div class="flex items-start space-x-4">
                    <div
                      class="w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center flex-shrink-0 mt-1"
                    >
                      <i class="fa fa-envelope text-primary"></i>
                    </div>
                    <div>
                      <h4 class="font-medium">电子邮箱</h4>
                      <p class="text-gray-600 dark:text-gray-400 mt-1">
                        <a
                          href="mailto:zhangxiaoming@example.com"
                          class="hover:text-primary transition-colors"
                          >zhangxiaoming@example.com</a
                        >
                      </p>
                    </div>
                  </div>

                  <div class="flex items-start space-x-4">
                    <div
                      class="w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center flex-shrink-0 mt-1"
                    >
                      <i class="fa fa-phone text-primary"></i>
                    </div>
                    <div>
                      <h4 class="font-medium">电话</h4>
                      <p class="text-gray-600 dark:text-gray-400 mt-1">
                        <a
                          href="tel:+8613800138000"
                          class="hover:text-primary transition-colors"
                          >+86 138-0013-8000</a
                        >
                      </p>
                    </div>
                  </div>
                </div>

                <div>
                  <h4 class="font-medium mb-4">社交媒体</h4>
                  <div class="flex space-x-4">
                    <a
                      href="#"
                      class="w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all"
                    >
                      <i class="fa fa-github"></i>
                    </a>
                    <a
                      href="#"
                      class="w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all"
                    >
                      <i class="fa fa-linkedin"></i>
                    </a>
                    <a
                      href="#"
                      class="w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all"
                    >
                      <i class="fa fa-twitter"></i>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer
      class="bg-white dark:bg-dark-200 py-10 transition-colors duration-300"
    >
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-6xl mx-auto">
          <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center space-x-2 mb-6 md:mb-0">
              <div
                class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center"
              >
                <span class="text-white font-bold">ZM</span>
              </div>
              <span class="text-xl font-bold">张小明</span>
            </div>

            <p
              class="text-gray-600 dark:text-gray-400 text-sm text-center md:text-right"
            >
              &copy; 2023 张小明的个人网站. 保留所有权利.
            </p>
          </div>
        </div>
      </div>
    </footer>

    <script>
      // 暗黑模式切换功能
      const html = document.documentElement;
      const themeToggle = document.getElementById("theme-toggle");
      const sunIcon = document.querySelector(".fa-sun-o");
      const moonIcon = document.querySelector(".fa-moon-o");

      // 检查用户偏好或本地存储的主题设置
      function checkThemePreference() {
        const savedTheme = localStorage.getItem("darkMode");
        if (savedTheme !== null) {
          return savedTheme === "true";
        }
        return window.matchMedia("(prefers-color-scheme: dark)").matches;
      }

      // 应用主题设置
      function applyTheme(isDark) {
        if (isDark) {
          html.classList.add("dark");
          // 确保图标状态正确
          sunIcon.classList.add("hidden");
          moonIcon.classList.remove("hidden");
        } else {
          html.classList.remove("dark");
          // 确保图标状态正确
          sunIcon.classList.remove("hidden");
          moonIcon.classList.add("hidden");
        }
        localStorage.setItem("darkMode", isDark);
      }

      // 初始化主题 - 确保图标显示正确
      applyTheme(checkThemePreference());

      // 绑定主题切换事件 - 明确控制图标显示
      themeToggle.addEventListener("click", () => {
        const isDark = html.classList.toggle("dark");
        // 手动切换图标显示状态
        if (isDark) {
          sunIcon.classList.add("hidden");
          moonIcon.classList.remove("hidden");
        } else {
          sunIcon.classList.remove("hidden");
          moonIcon.classList.add("hidden");
        }
        localStorage.setItem("darkMode", isDark);
      });

      // 移动端菜单切换
      const mobileMenuButton = document.getElementById("mobile-menu-button");
      const mobileMenu = document.getElementById("mobile-menu");

      mobileMenuButton.addEventListener("click", () => {
        mobileMenu.classList.toggle("hidden");
      });

      // 点击导航链接后关闭移动菜单
      const mobileLinks = mobileMenu.querySelectorAll("a");
      mobileLinks.forEach((link) => {
        link.addEventListener("click", () => {
          mobileMenu.classList.add("hidden");
        });
      });

      // 平滑滚动
      document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
        anchor.addEventListener("click", function (e) {
          e.preventDefault();

          const targetId = this.getAttribute("href");
          if (targetId === "#") return;

          const targetElement = document.querySelector(targetId);
          if (targetElement) {
            window.scrollTo({
              top: targetElement.offsetTop - 80,
              behavior: "smooth",
            });
          }
        });
      });

      // 滚动时导航栏样式变化
      window.addEventListener("scroll", () => {
        const header = document.querySelector("header");
        if (window.scrollY > 50) {
          header.classList.add("shadow-md");
          header.classList.remove("shadow-sm");
        } else {
          header.classList.remove("shadow-md");
          header.classList.add("shadow-sm");
        }
      });
    </script>
  </body>
</html>
